import React from 'react';
import { homeApi } from 'js/api/home';
import api from 'js/api/index';
import Head from 'views/component/head/head';
import { Icon } from 'antd-mobile';
import { SubViewLink } from 'views/component/subViewLink/subViewLink';
import { i18n } from 'js/core/i18n';
import './home.scss';
import userData from 'js/core/userData';
class MainPage extends React.Component {
	constructor() {
		super();
		this.state = {
			sumNumber: {},
			everyDayCheckBriefing: {},
			newCheckMatch: null,
			shopAlarmNumber: {},
			flowAllThreeData: [],
			open: false
		};
	}
	componentDidMount() {
		this.getSumNumber();
		this.getEveryDayCheckBriefing();
		this.getThree();
		this.getNewCheckMatch();
		this.getShopAlarmNumber();
	}
	getSumNumber = () => {
		api('/Mobile/getSumNumber').then((data) => {
			this.setState({ sumNumber: data.data[0] })
		});
	}
	getThree = () => {
		api('/Flow/FlowStoreThree').then((data) => {
			this.setState({ flowAllThreeData: data.data })
		});
	}
	getEveryDayCheckBriefing = () => {
		api('/Mobile/getEveryDayCheckBriefing').then((data) => {
			this.setState({ everyDayCheckBriefing: data.data[0] })
		});
	}
	getNewCheckMatch = () => {
		api('/Mobile/getNewCheckMatch').then((data) => {
			this.setState({ newCheckMatch: data.data })
		});
	}
	getShopAlarmNumber = () => {
		api('/Mobile/getShopAlarmNumber').then((data) => {
			this.setState({ shopAlarmNumber: data.data[0] })
		});
	}
	render() {
		const { sumNumber, everyDayCheckBriefing, newCheckMatch, shopAlarmNumber, open, flowAllThreeData } = this.state;
		return <div id="home" className="flex-col">
			<Head head={i18n.get("首页")} isShow={false} />

			<div className="flex-g-1 scroll-absolute">
				<div className="home-container">

					<div className="flex jc-between margin-btm">
						<div className="home-flex">
							<div className="home-head">{i18n.get("门店总数")}</div>
							<div className="home-num flex-center">
								{sumNumber.ShopCount}
							</div>
							<div className="home-dec  flex-center">
								<div className="point"></div>
								{sumNumber.ShopLook}{i18n.get("可视")}</div>
						</div>
						<div className="home-flex">
							<div className="home-head">{i18n.get("摄像头总数")}</div>
							<div className="home-num flex-center">
								<div className="">{sumNumber.CameraCount}</div>
							</div>
							<div className="home-dec  flex-center">
								<div className="point"></div>
								{sumNumber.CameraLook}{i18n.get("在线")}</div>
						</div>
						<div className="home-flex">
							<div className="home-head">{i18n.get("客流设备总数")}</div>
							<div className="home-num flex-center">
								<div className="">{sumNumber.FlowDeviceCount}</div>
							</div>
							<div className="home-dec flex-center">
								<div className="point"></div>
								{sumNumber.FlowDeviceLook}{i18n.get("在线")}</div>
						</div>
					</div>
					{userData.hasPower(301) && <div className="home-breif margin-btm">
						<div className="comm-head breif-head flex-vcenter">
							<div className="flex-g-1">{i18n.get("门店客流排名")}</div>
							<SubViewLink className="flex-col-2  flex-center" moduleName="totalFlow" title={i18n.get("总客流分析")}>
								<Icon type="right" size="md" />
							</SubViewLink>
						</div>
						<div className="breif-content">
							{flowAllThreeData[0] && <div className="flex-vcenter rankItem">
								<div className="icon_rank1"></div>
								<div className="name">{flowAllThreeData[0].ShopName}</div>
								<div className="data">
									({i18n.get("过客量")}:{flowAllThreeData[0].CrossCount};{i18n.get("入店量")}:{flowAllThreeData[0].InStoreCount})
								</div>
							</div>}
							{flowAllThreeData[1] && <div className="flex-vcenter rankItem">
								<div className="icon_rank2"></div>
								<div className="name">{flowAllThreeData[1].ShopName}</div>
								<div className="data">
									({i18n.get("过客量")}:{flowAllThreeData[1].CrossCount};{i18n.get("入店量")}:{flowAllThreeData[1].InStoreCount})
								</div>
							</div>}
							{flowAllThreeData[2] && <div className="flex-vcenter rankItem">
								<div className="icon_rank3"></div>
								<div className="name">{flowAllThreeData[2].ShopName}</div>
								<div className="data">
									({i18n.get("过客量")}:{flowAllThreeData[2].CrossCount};{i18n.get("入店量")}:{flowAllThreeData[2].InStoreCount})
								</div>
							</div>}
						</div>
					</div>}
					{userData.hasPower(403) && <div className="home-breif margin-btm">
						<div className="comm-head breif-head flex-vcenter">
							<div className="flex-g-1">{i18n.get("每日巡店简报")}</div>
							<SubViewLink className="flex-col-2  flex-center" moduleName="handleListSummary" title={i18n.get("巡店记录汇总")}>
								<Icon type="right" size="md" />
							</SubViewLink>
						</div>
						<div className="breif-content">
							<div className="flex jc-around breif-show">
								<div className="breif-flex">
									<span>{everyDayCheckBriefing.TodayOK}</span>
									<p> {i18n.get("今日巡店")}</p>
								</div>
								<div className="breif-flex">
									<span>{everyDayCheckBriefing.TodayNO}</span>
									<p> {i18n.get("超期未检")}</p>
								</div>
							</div>
							<div className="breif-footer flex-center">
								<div className="flex-g-1 breif-result">
									{i18n.get("昨日处理")}：<span>{everyDayCheckBriefing.YesterDay}</span>
								</div>
								<div className="flex-g-1 breif-result">
									{i18n.get("本周处理")}：<span>{everyDayCheckBriefing.week}</span>
								</div>
							</div>
						</div>
					</div>}
					{/* <div className="home-breif margin-btm">
						<div className="comm-head breif-head flex-vcenter">
							<div className="flex-g-1">{i18n.get("最新巡店情况")}</div>
							<SubViewLink className="flex-col-2 breif-href" moduleName="storeRecord" title={i18n.get("巡店记录")}></SubViewLink>
						</div>
						{newCheckMatch && newCheckMatch.map((item, index) => {
							if (!open && index > 0) {
								return;
							}
							return <div className="news-content">
								<div className="new-nums flex-center">
									<div className="flex-col-9 ">
										{item.CheckName}{i18n.get("巡店评分")}
									</div>
									<div className="flex-g-1"><strong>{item.Match}</strong>{i18n.get("分")}
									</div>
								</div>
								<p>{i18n.get("提交时间")}：{item.Date}</p>
							</div>
						})}
						{newCheckMatch && newCheckMatch.length > 1 && 
						<div className={"flex-center open " + (open ? 'close_icon' : 'open_icon')} onClick={() => { this.setState({ open: !open }) }}>

						</div>}
					</div> */}
					{userData.hasPower(5) && <div className="home-breif margin-btm">
						<div className="comm-head breif-head flex-vcenter">
							<div className="flex-g-1">{i18n.get("防盗防损")}</div>
							<SubViewLink className="flex-col-2 flex-center" moduleName="eas" title={i18n.get("防盗防损")}>
								<Icon type="right" size="md" />
							</SubViewLink>
						</div>
						<div className="news-content">
							<div className="new-nums flex-center">
								<div className="flex-col-9 ">{i18n.get("每日异常店铺数量")}</div>
								<div className="flex-g-1">
									<strong>{shopAlarmNumber.Now}</strong>
									{/* {i18n.get("个")} */}
								</div>
							</div>
							<div className="news-footer flex">
								<div className="flex-col-5">
									{i18n.get("同比上周")}：<span>{shopAlarmNumber.T}</span>
								</div>
								<div className="flex-col-5">
									{i18n.get("环比昨日")}：<span>{shopAlarmNumber.H}</span>
								</div>
							</div>
						</div>
					</div>}
				</div>
			</div>
		</div >;
	}
}

export default MainPage;
